<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<title>SyenFarm:学了个习</title>
    <meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="description" content="我的主页">
	<meta name="keywords" content="浏览器主页">
<style type="text/css">

/*--- reset start ---*/
body, div, h1, p, ul, li {
	margin: 0;
	padding: 0;
	outline: 0;
}
ul, li {
	list-style: none;
}
img {
	border: none;
	display: block;
}
a, a:visited {	
  color: #79A325;
  background: inherit;
  text-decoration: none;
}
a:hover {
  color: #73471B;
  background: inherit;
}
.clearfloat {
	zoom: 1;
}
.clearfloat:after {
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
/*--- reset end ---*/

body {
  background: #CCC;
  font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  color: #6B6B6B; 
  text-align: center;	
}

/*--- headers ---*/
h1, h3 {
  font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
  font-weight: Bold; 	
  padding: 10px;		
  color: #444;
}
h1 {
  font-size: 2.9em;
}
h3 {
  font-size: 1.6em;
  font-weight: normal;
  padding: 16px 10px 4px 10px;
}

/*--- Paragraph ---*/
p { padding: 12px 10px;	}

/*--- Lists ---*/
ul {
  margin: 10px 20px;
  padding: 0 20px;
}

/*---LAYOUT---*/ 
.wrap {
	position: relative;
	width: 952px;
	background: #FFF url(images/wrap.gif) repeat-y center top;
	margin: 40px auto 30px auto;
	text-align: left;	
}
.header {
	position: relative;
	width: 952px;
	height: 245px;
	background: #8AB84B url(images/header.jpg) no-repeat;	
	color: #fff;	
	padding: 0;	
	margin: 0;	
}
.header .logo-text a {
	position: absolute;
	margin: 0; 
    padding: 0;
	font: bold 66px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
	letter-spacing: -5px;
	color: #332616;
	top: 75px; 
    left: 55px;	
}
.header .slogan {
	position: absolute;
	margin: 0; 
	padding: 0;
	font: bold 15px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
	color: #322815;
	letter-spacing: -0.5px;
	top: 148px; 
    left: 150px;		
}

/*--- Navigation ---*/
.nav {
  width: 952px;
  height: 50px;
  background: #988060 url(images/nav.gif) no-repeat;		
}
.nav ul {
	float: left;	
	margin: 5px 0 0 0;
	height: 45px;
	padding: 0 0 0 40px;					
}
.nav ul li {
	float: left;
	padding: 0 0 0 10px;		
}
.nav ul li a {
	float: left;
	padding: 0 15px 0 5px;
	color: #FFF;
	font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;	
}
.nav ul li a:hover, .nav ul li a:active {
	color: #E7FAA9;	
}
.nav .current {
	background: transparent url(images/left-tab.gif) no-repeat;	
}
.nav .current a {	
	color: #4B3D2C;
	background: transparent url(images/right-tab.gif) no-repeat right top;	
}

/*--- search navigation ---*/
.search_nav{
  width: 263px;
  height: 296px;
  padding: 20px 0 0 50px; 
}
.search_nav ul{
  margin: auto;
  display: block; 
}
.search_nav ul li{
  display: block;
  width: auto;
  height: 29px;
  line-height: 29px;
}
.search_nav ul li a{
  height: 29px;
  display: block; 
  width: 263px;
  padding: 0 0 0 35px; 
  margin: 7px 0;
  color: #d4f0ba;
  background: url(images/search_nav.gif) no-repeat center;
  background-position: 0px 0px;
}
.search_nav a:hover{
  height:29px;
  display:block;
  width:263px;
  color: #d4f0ba;
  padding:0 0 0 35px;
  margin:7px 0; 
  background:url(images/search_nav_a.gif) no-repeat center;
  background-position:0px 0px;
}
.search_nav .current{
  height:29px;
  display:block;
  width:263px;
  color: #d4f0ba;
  padding:0 0 0 35px;
  margin:7px 0; 
  background:url(images/search_nav_a.gif) no-repeat center;
  background-position:0px 0px;
}

/*--- listbar menu ---*/
.listbar {
	position: relative;
	margin: 0 auto;
	width: 900px;
}
.listbar h3 {
	color: #51432F;
  font: bold 1.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif;
  letter-spacing: 2px;
	text-align: center;
}
.listbar .listmenu {

}
.listbar .listmenu li {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #E8E8E8;
}
.listbar .listmenu li a {
  color: #739A23;
  font-size: 1.2em;
}
.listbar .listmenu li a:hover {
  color: #000;
  background:none;
}
.listbar .box {
  float:left;
  width: 225px;
}

/* footer */
.footer {
	width: 952px;
	padding: 30px 0;
	background: #CCC url(images/footer-bottom.gif) no-repeat;			
}      
</style>
</head>
<body>
<!-- wrap starts here -->
<div class="wrap clearfloat">
<!--header -->
  <div class="header clearfloat">			
    <h1 class="logo-text"><a href="index.html" title="">Syen Farm</a></h1>		
	<p class="slogan">I know H.T.M.L(How To Meet Ladies)</p>								
<!--header ends-->					
  </div>
<!-- navigation starts-->	
  <div  class="nav clearfloat">
	<ul>
	  <li><a href="index.html">搜索引擎</a></li>
	  <li><a href="use.html">常用网站</a></li>
	  <li><a href="amusement.html">我娱我乐</a></li>
	  <li class="current"><a href="learn.html">学了个习</a></li>
	  <li><a href="shop.html">购物败家</a></li>
	  <li><a href="setupwebsite.html">网址维护</a></li>
	</ul>
<!-- navigation ends-->	
  </div>					
<!-- learn starts -->
  <div class="listbar clearfloat">
	<div class="box clearfloat">
	  <h3>前端网站</h3>
	  <ul class="listmenu">				
		<li><a href="https://dwqs.gitbooks.io/frontenddevhandbook/content/index.html">开发者手册</a></li>
		<li><a href="https://leohxj.gitbooks.io/front-end-database/content/index.html">工程师手册</a></li>
		<li><a href="https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers">面试题</a></li>
		<li><a href="http://javascript.ruanyifeng.com/">JS教程</a></li>
		<li><a href="http://lib.csdn.net/base/18">JS知识库</a></li>					
	  </ul>	
	</div>

	<div class="box clearfloat">
	  <h3>开源网站</h3>
	  <ul class="listmenu">				
		<li><a href="http://www.csdn.net/?ref=toolbar">CSDN</a></li>
		<li><a href="https://github.com/">GitHub</a></li>
		<li><a href="https://developer.mozilla.org/zh-CN/">	MDN</a></li>
		<li><a href="http://www.w3cplus.com/">W3Cplus</a></li>
		<li><a href="http://www.oschina.net/">开源中国</a></li>					
	  </ul>	
	</div>
		
	<div class="box clearfloat">
	  <h3>资料网站</h3>
	  <ul class="listmenu">
		<li><a href="http://www.w3school.com.cn/">W3Cschool</a></li>					
		<li><a href="http://www.ituring.com.cn/">图灵社区</a></li>
		<li><a href="http://www.imooc.com/">慕课网</a></li>
		<li><a href="http://open.163.com/ocw/">网易公开课</a></li>	
		<li><a href="http://www.runoob.com/">菜鸟教程</a></li>
	  </ul>
	</div>
		
	<div class="box clearfloat">
	  <h3>稀奇古怪</h3>
	  <ul class="listmenu">	
        <li><a href="http://linux.vbird.org//">鸟哥私房菜</a></li>
		<li><a href="http://1nami.com/">1纳米学习网</a></li>				
	  </ul>	
	</div>
	<!-- learn ends -->
  </div>
	<!-- footer starts -->		
  <div class="footer clearfloat"></div> 
<!-- wrap ends here -->
</div>
</body>
</html>